<template>
    <div class="ld">
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <Title titleName="收藏详情" v-if="!pageStat"></Title>
        <div class="list-item" v-for="item in itemList" :key="item.id">
            <img :src="item.itemImgUrl" class="itemIcon">
            <div class="itemInfo">
                <span class="itemName">{{item.itemName}}</span>
                <span class="itemSubtitle">{{item.itemSubtitle}}</span>
                <span class="itemDescription">{{item.itemDescription}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'
    import Title from '@/components/title/Title.vue'


    export default {
        data() {
            return {
                itemList: [],
                pageStat: true
            }
        },
        components: {
            Loading,
            Title
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                axios.get('/api/getItemsLegendDetail', {
                        params: {
                            id: this.$route.params.id
                        }
                    })
                    .then(res => {
                        console.log(res)
                        this.itemList = res.data
                        this.$nextTick(() => {
                            this.pageStat = false
                        })
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .list-item {
        display: flex;
        /* flex: 1; */
        padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
    }

    .itemIcon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin: 10px;
    }

    .itemInfo {
        color: white;
        flex-direction: column;
        margin-top: 10px;
        flex: 1;
    }

    .itemName {
        font-size: 20px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
    }

    .itemSubtitle {
        display: block;
        font-size: 14px;
        margin-top: 5px;
    }

    .itemDescription {
        font-size: 13px;
        padding-right: 50px;
        margin-top: 5px;
        word-break: normal;
        width: auto;
        display: block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
        font-style: italic;
    }

    .loading {
        height: 718px;
        overflow: hidden;
    }
</style>